<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      :offset="80"
      @load="loadMore">
      <div v-if="orderList.length > 0">
        <div v-for="item in orderList" :key="item.order_id" class="order-list">
          <div class="order-list-item">
            <div class="top-part">
              <div class="title">订单号：{{ item.order_sn }}</div>
              <div class="status fr">
                <span v-if="item.status === 0" class="txt">待审核</span>
                <span v-if="item.status === 1" class="txt">待财务审核</span>
                <span v-if="item.status === 2" class="txt">待出库审核</span>
                <span v-if="item.status === 3" class="txt">待发货</span>
                <span v-if="item.status === 4" class="txt">待买家确认收货</span>
                <span v-if="item.status === 5" class="txt">已完结</span>
                <span v-if="item.status === 6" class="txt">已作废</span>
              </div>
            </div>
            <tpl-goods-slide :item-list="item.item_list"/>
            <div class="middle-part">
              <div class="inline">
                <span class="timer">下单时间：{{ item.create_time }}</span>
                <div class="fr">
                  <span class="label">金额:  </span>
                  <span class="txt">&yen; {{ Number(item.total_fee).toFixed(getitem.item_price_p) }}</span>
                </div>
              </div>
            </div>
            <div class="bottom-part">
              <van-button v-if="item.is_get == 1" class="btn btn-orange" size="small" type="primary" @click="goToDetail(item, 'receive')">收货确认</van-button>
              <van-button size="small" class="btn" type="default" @click="goToDetail(item)">订单详情</van-button>
              <van-button size="small" class="btn" type="default" @click="againAddOrder(item)">再来一单</van-button>
              <van-button v-if="item.is_button == 1" class="btn btn-orange" size="small" type="default" @click="payEvent(item)">付 款</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-list>
    <div v-if="orderList.length == 0 && !loading" class="noData">
      <div class="content">
        <img src="../../../assets/images/noData/noDataOrder.png" alt="">
        <div class="text">暂无订单</div>
      </div>
    </div>
    <payment-dialog ref="payDialog" :pay-type="payType"/>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getOrderList } from '@/api/order'
import tplGoodsSlide from './tplGoodsSlide'
import paymentDialog from './paymentDialog'
export default {
  name: 'TplList',
  components: {
    tplGoodsSlide,
    paymentDialog
  },
  data() {
    return {
      payType: undefined,
      getAllData: false, // 为true时加载完全部数据
      orderList: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapGetters([
      'getitem'
    ])
  },
  methods: {
    loadMore() {
      // 数据全部加载完成
      this.getOrderListFn()
    },
    // 支付按钮
    payEvent(item) {
      this.$refs.payDialog.showDialog = true
      this.$refs.payDialog.formData.order_id = item.order_id
      this.$refs.payDialog.not_pay_fee = item.not_pay_fee
    },
    goToDetail(row, type) {
      this.$router.push({
        name: 'order-detail',
        query: {
          id: row.order_id,
          type: type
        }
      })
    },
    // 获取订单列表
    getOrderListFn() {
      getOrderList(this.$parent.formData).then(res => {
        // 异步更新数据
        this.loading = false
        const data = res.data
        if (data.status_code === 200) {
          const orderList = this.orderList
          const newArr = orderList.concat(data.data.list)
          this.orderList = newArr
          this.$parent.formData.p++
          if (this.orderList.length >= data.data.count) {
            this.finished = true
            this.getAllData = true
          }
          this.formattingSkuName(this.orderList)
        } else {
          this.orderList = []
          this.finished = true
        }
      })
    },
    // 修改返回的JSON
    formattingSkuName(data) {
      data.forEach(itemList => {
        if (itemList.item_list) {
          itemList.item_list.forEach(skuList => {
            if (skuList.sku_name) {
              const reg1 = new RegExp('[{}"]*', 'g')
              const reg2 = new RegExp(':', 'g')
              const reg3 = new RegExp(',', 'g')
              skuList.sku_name =
                skuList.sku_name
                  .replace(reg1, '')
                  .replace(reg2, '：')
                  .replace(reg3, '，')
            }
          })
        }
      })
    },
    // 再来一单
    againAddOrder(order) {
      console.log('item=', order)
      const postData = {
        item_ids: [],
        sku_ids: [],
        nums: [],
        is_cart: 1
      }
      order.item_list.forEach(item => {
        postData.item_ids.push(item.item_id)
        postData.sku_ids.push(item.sku_id ? item.sku_id : '')
        postData.nums.push(item.num)
      })
      this.$router.push({ name: 'shop-settlement', query: {
        itemData: JSON.stringify(postData)
      }})
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .order-list{
    margin-top: pxCalc(5px);
    background: #fff;
    padding-left: pxCalc(20px);
    &-item{
      .top-part{
        height: 42px;
        line-height: 42px;
        font-size: pxCalc(14px);
        padding-right: pxCalc(20px);
        border-bottom: pxCalc(1px) solid #e5e5e5;
        .title{
          color: #363b43;
          display: inline-block;
        }
        .status{
          display: inline-block;
          color: #fea321;
        }
      }
      .middle-part2{
        border-bottom: pxCalc(1px) solid #e5e5e5;
        font-size: 0;
        .good-info{
          padding: pxCalc(15px) pxCalc(20px) pxCalc(15px) 0;
          &.hidden{
            height: 0;
            overflow: hidden;
          }
          .inline{
            font-size: pxCalc(13px);
            line-height: 24px;
            color: #6c6c6c;
            .price{
              color: #000;
            }
          }
        }
      }
      .middle-part{
        padding-right: pxCalc(20px);
        border-bottom: pxCalc(1px) solid #e5e5e5;
        padding: pxCalc(15px) 0;
        background-color: #fff;
        font-size: 0;
        .inline{
          display: block;
          font-size: pxCalc(13px);
          padding-right: pxCalc(20px);
          .timer{
            color: #999999;
          }
          .label{
            color: #363b43;
          }
          .txt{
            color: #ff0000;
            font-size: pxCalc(14px);
          }
        }
      }
      .bottom-part{
        text-align: right;
        padding: pxCalc(15px) pxCalc(20px) pxCalc(15px) 0;
        font-size: 0;
        .btn{
          margin: 0 pxCalc(5px);
          /*border-radius: pxCalc(5px);*/
          &.btn-orange{
            background: #ff7340!important;
            border: pxCalc(1px) solid #ff7340;
            color: #fff;
            &:active{
              background: #e26739;
            }
          }
        }
      }
    }
  }
</style>
